CSS-i loogilised omadused, 2. tase: tõeliselt globaalse veebi ehitamine täiustatud kirjutusrežiimi toega

Aastakümneid on veebiarendajad ehitanud küljendusi, kasutades füüsilisest maailmast pärit sõnavara: ülal, all, vasakul, ja paremal. Me määrasime margin-left, padding-top ja border-right. See mõttemudel teenis meid hästi, kui veeb oli peamiselt vasakult paremale ja ülalt alla liikuv meedium. Kuid veeb on globaalne. See on platvorm kõikidele keeltele ja kultuuridele, millest paljud ei järgi seda lihtsat suunavoogu.

Keeled nagu araabia ja heebrea on kirjutatud paremalt vasakule. Traditsioonilist jaapani ja hiina keelt saab kirjutada vertikaalselt, ülalt alla ja paremalt vasakule. Füüsilise, vasakult paremale suunatud CSS-mudeli pealesurumine nendele kirjutusviisidele toob kaasa katkised küljendused, masendava kasutajakogemuse ja mäekõrguse koodi ülekirjutamiste hulga. Siin tulevadki mängu CSS-i loogilised omadused ja väärtused, mis esindavad fundamentaalset paradigmanihet füüsilistelt suundadelt voo-suhtelistele, loogilistele suundadele. Kuigi 1. tase pani aluse, lõpetab CSS-i loogiliste omaduste 2. tase pildi, pakkudes tööriistu, mida vajame tõeliselt universaalsete, kirjutusrežiimist teadlike kasutajaliideste ehitamiseks.

See põhjalik juhend viib teid sügavuti 2. taseme toodud täiustustesse. Alustame põhimõistete meeldetuletamisega, seejärel uurime uusi omadusi ja väärtusi, mis täidavad lüngad, ning lõpuks rakendame kõike praktikas, ehitades komponendi, mis kohandub sujuvalt mis tahes kirjutusrežiimiga. Olge valmis muutma oma mõtteviisi CSS-i küljendusest igaveseks.

Kiire meeldetuletus: loogiliste omaduste põhimõisted (1. tase)

Enne kui saame hinnata 2. taseme lisandusi, peab meil olema kindel arusaam 1. taseme pandud alustest. Kogu süsteem on üles ehitatud kahele põhimõistele: kirjutusrežiim ning sellest tulenevad ploki- ja reateljed.

Neli kirjutusrežiimi

CSS-i omadus writing-mode määrab teksti paigutamise suuna. Kuigi me sageli peame vaikeseadet iseenesestmõistetavaks, on mitu väärtust, mis muudavad sisu voogu lehel põhjalikult:

• horizontal-tb: See on enamiku lääne keelte vaikeseade. Tekst voolab horisontaalselt (rea telg) vasakult paremale (või paremalt vasakule, sõltuvalt suunast) ja read laotakse ülalt alla (ploki telg).
• vertical-rl: Kasutatakse traditsioonilises Ida-Aasia tüpograafias (nt jaapani, hiina keeles). Tekst voolab vertikaalselt ülalt alla (rea telg) ja read laotakse paremalt vasakule (ploki telg).
• vertical-lr: Sarnane eelmisele, kuid read laotakse vasakult paremale (ploki telg). Vähem levinud, kuid kasutatakse mõnes kontekstis, näiteks mongoli kirjas.
• sidelong-rl / sidelong-lr: Need on mõeldud spetsiifilisteks kasutusjuhtudeks, kus soovite glüüfid külili paigutada. Need on üldises veebisisus vähem levinud.

Otsustav mõiste: ploki- vs. reatelg

See on kõige olulisem mõiste, millest aru saada. Loogilises maailmas lõpetame mõtlemise "vertikaalsest" ja "horisontaalsest" ning hakkame mõtlema ploki- ja reatelgede terminites. Nende orientatsioon sõltub täielikult writing-mode'ist.

• Rea telg on suund, milles tekst voolab ühe rea piires.
• Ploki telg on suund, milles uued read laotakse.

Vaatame, kuidas see toimib:

• Standardse inglise keele puhul (writing-mode: horizontal-tb): rea telg kulgeb horisontaalselt ja ploki telg kulgeb vertikaalselt.
• Traditsioonilise jaapani keele puhul (writing-mode: vertical-rl): rea telg kulgeb vertikaalselt ja ploki telg kulgeb horisontaalselt.

Kuna need teljed võivad vahetuda, muutuvad omadused nagu width ja height mitmetähenduslikuks. Kas width on suurus piki horisontaaltelge või reatelge? Loogilised omadused lahendavad selle mitmetähenduslikkuse. Nüüd on meil iga telje jaoks start ja end:

• block-start: Inglise keeles "ülal", aga vertikaalses jaapani keeles "paremal".
• block-end: Inglise keeles "all", aga vertikaalses jaapani keeles "vasakul".
• inline-start: Inglise keeles "vasakul", aga vertikaalses jaapani keeles "ülal".
• inline-end: Inglise keeles "paremal", aga vertikaalses jaapani keeles "all".

Füüsiliste ja loogiliste omaduste vastavusse viimine (1. tase)

1. tase tutvustas põhjalikku komplekti vastavusi füüsilistest omadustest loogilistele. Siin on mõned põhinäited:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (positsioneerimiseks) → inset-inline-start / inset-inline-end
• top / bottom (positsioneerimiseks) → inset-block-start / inset-block-end

1. tase andis meile ka kasulikke lühendeid nagu margin-inline (alguse ja lõpu jaoks) ja padding-block (alguse ja lõpu jaoks).

Tere tulemast 2. tasemele: mis on uut ja miks see on oluline

Kuigi 1. tase oli monumentaalne samm edasi, jättis see mõned märgatavad lüngad. Teatud fundamentaalsetel CSS-i omadustel nagu float, clear ja resize puudusid loogilised vasted. Lisaks ei saanud omadusi nagu border-radius loogiliselt kontrollida, mis sundis arendajaid peenema stiliseerimise jaoks tagasi pöörduma füüsiliste omaduste juurde. See tähendas, et sa võisid ehitada küljenduse 90% ulatuses loogiliste omadustega, kuid vajasid siiski füüsilisi ülekirjutamisi erinevate kirjutusrežiimide jaoks, mis osaliselt nurjas eesmärgi.

CSS-i loogiliste omaduste 2. tase tegeleb nende puudustega otse. Eesmärk ei ole tutvustada radikaalselt uut süsteemi, vaid täiendada 1. tasemel alustatut. See saavutatakse kahel peamisel viisil:

1. Uute loogiliste omaduste ja väärtuste tutvustamine vanematele CSS-i funktsioonidele, mis olid oma olemuselt füüsilised (nagu float).
2. Loogiliste omaduste vastavuste lisamine keerukatele lühenditele, mida varem eirati (nagu border-radius).

2. tasemega on visioon täielikult voo-suhtelisest stiliseerimissüsteemist peaaegu täitunud, võimaldades meil ehitada keerukaid, kauneid ja vastupidavaid komponente, mis töötavad kõikjal, kõigi jaoks, ilma häkkide või ülekirjutamisteta.

Süvaanalüüs: uued loogilised väärtused ja omadused 2. tasemel

Uurime kõige mõjukamaid lisandusi, mida 2. tase meie arendaja tööriistakasti toob. Need on vahendid, mis täidavad lüngad ja võimaldavad luua tõeliselt universaalset komponentide disaini.

Float ja Clear: loogiline revolutsioon

Omadus float on aastaid olnud CSS-i küljenduse nurgakivi, kuid selle väärtused, left ja right, on füüsilise suuna definitsioon. Kui te ujutate pildi ingliskeelses lõigus left poole, näeb see korrektne välja. Aga muutke dokumendi suund paremalt vasakule (RTL) araabia keele jaoks ja pilt on nüüd tekstiploki "valel" poolel. See peaks olema paremal, mis on rea algus.

2. tase tutvustab omadusele float kahte uut, loogilist märksõna:

• float: inline-start; See ujutab elemendi rea suuna algusesse. LTR-keeltes on see vasakul. RTL-keeltes on see paremal. Kirjutusrežiimis vertical-rl on see üleval.
• float: inline-end; See ujutab elemendi rea suuna lõppu. LTR-keeltes on see paremal. RTL-keeltes on see vasakul. Kirjutusrežiimis vertical-rl on see all.

Sarnaselt saab omadus clear, mida kasutatakse sisu voolamise kontrollimiseks ümber ujutatud elementide, oma loogilised vasted:

• clear: inline-start; Puhastab ujutused rea alguse poolel.
• clear: inline-end; Puhastab ujutused rea lõpu poolel.

See on mängumuutev. Nüüd saate luua klassikalisi pilt-tekstiga küljendusi, mis kohanduvad automaatselt mis tahes keelesuunaga ilma ühegi lisarea CSS-koodita.

Täiustatud kontroll loogilise suurusemuutmisega (Resize)

Omadus resize, mida tavaliselt kasutatakse textarea puhul, võimaldab kasutajatel elemendi suurust muuta. Selle traditsioonilised väärtused on horizontal, vertical ja both. Aga mida tähendab "horisontaalne" vertikaalses kirjutusrežiimis? See tähendab endiselt suuruse muutmist piki füüsilist horisontaaltelge, mis ei pruugi olla see, mida kasutaja või disainer kavatseb. Kasutaja soovib tõenäoliselt muuta elemendi suurust piki selle reatelge, et muuta read pikemaks või lühemaks.

2. tase tutvustab loogilisi väärtusi omadusele resize:

• resize: inline; Võimaldab suuruse muutmist piki reatelge.
• resize: block; Võimaldab suuruse muutmist piki plokitelge.

Kasutades resize: block; textarea peal inglise keeles, saab kasutaja seda kõrgemaks teha. Kasutades seda vertikaalses kirjutusrežiimis, saab kasutaja seda laiemaks teha (mis on ploki suund). See lihtsalt töötab.

`caption-side`: loogiline positsioneerimine tabeli pealkirjadele

Omadus caption-side määrab tabeli caption'i paigutuse. Vanad väärtused olid top ja bottom. Jällegi, need on füüsilised. Kui disaineri kavatsus on paigutada pealkiri tabeli sisu "ette", siis top töötab horisontaalsete kirjutusrežiimide puhul. Aga vertical-rl režiimis on plokivoo "algus" paremal, mitte üleval.

2. tase pakub loogilise lahenduse:

• caption-side: block-start; Paigutab pealkirja plokivoo algusesse.
• caption-side: block-end; Paigutab pealkirja plokivoo lõppu.

`text-align`: fundamentaalne loogiline väärtus

Kuigi väärtused start ja end omaduse text-align jaoks on juba mõnda aega olemas olnud, on need loogiliste omaduste filosoofia põhiosa ja väärivad rõhutamist. text-align: left; kasutamine on tavaline viga, mis põhjustab kohe küljendusprobleeme RTL-keeltes. Korrektne, kaasaegne lähenemine on alati kasutada:

• text-align: start; Joondab teksti rea suuna algusesse.
• text-align: end; Joondab teksti rea suuna lõppu.

2. taseme kroonijuveel: loogiline `border-radius`

Võib-olla kõige olulisem ja võimsam lisandus 2. tasemel on omaduste komplekt ääriseraadiuste loogiliseks kontrollimiseks. Varem, kui soovisite, et kaardil oleksid ümarad nurgad ainult "ülaosas", kasutasite border-top-left-radius ja border-top-right-radius. See laguneb täielikult vertikaalses kirjutusrežiimis, kus "ülemised" nurgad on nüüd start-start ja end-start nurgad.

2. tase tutvustab nelja uut pikka omadust, mis vastavad elemendi neljale nurgale voo-suhtelisel viisil. Nimetuskonventsioon on border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Nurk, kus kohtuvad ploki alguse ja rea alguse pooled.
• border-start-end-radius: Nurk, kus kohtuvad ploki alguse ja rea lõpu pooled.
• border-end-start-radius: Nurk, kus kohtuvad ploki lõpu ja rea alguse pooled.
• border-end-end-radius: Nurk, kus kohtuvad ploki lõpu ja rea lõpu pooled.

Seda võib alguses olla keeruline visualiseerida, seega kaardistame selle erinevate kirjutusrežiimide jaoks:

`border-radius`'e kaardistamine `writing-mode: horizontal-tb` puhul (nt inglise keel)

• border-start-start-radius vastab omadusele top-left-radius.
• border-start-end-radius vastab omadusele top-right-radius.
• border-end-start-radius vastab omadusele bottom-left-radius.
• border-end-end-radius vastab omadusele bottom-right-radius.

`border-radius`'e kaardistamine `writing-mode: horizontal-tb` puhul koos `dir="rtl"` atribuudiga (nt araabia keel)

Siin on rea suund ümber pööratud.

• border-start-start-radius vastab omadusele top-right-radius. (Ploki algus on üleval, rea algus on paremal).
• border-start-end-radius vastab omadusele top-left-radius.
• border-end-start-radius vastab omadusele bottom-right-radius.
• border-end-end-radius vastab omadusele bottom-left-radius.

`border-radius`'e kaardistamine `writing-mode: vertical-rl` puhul (nt jaapani keel)

Siin on mõlemad teljed pööratud.

• border-start-start-radius vastab omadusele top-right-radius. (Ploki algus on paremal, rea algus on üleval).
• border-start-end-radius vastab omadusele bottom-right-radius.
• border-end-start-radius vastab omadusele top-left-radius.
• border-end-end-radius vastab omadusele bottom-left-radius.

Kasutades neid uusi omadusi, saate määratleda nurgaraadiused, mis on semantiliselt seotud sisu vooga, mitte füüsilise ekraaniga. "start-start" nurk on alati õige nurk, olenemata keelest või teksti suunast.

Praktiline rakendamine: globaalselt valmis komponendi ehitamine

Teooria on tore, aga vaatame, kuidas see praktikas toimib. Ehitame lihtsa profiilikaardi komponendi, kasutades esmalt vanu füüsilisi omadusi ja seejärel refaktoorime selle, et kasutada kaasaegseid loogilisi omadusi nii 1. kui ka 2. tasemelt.

Kaardil on ühele poole ujutatud pilt, pealkiri, veidi teksti ning dekoratiivne äär ja ümarad nurgad.

"Vana" viis: habras, füüsiliste omadustega kaart

Nii oleksime võinud seda kaarti mõned aastad tagasi stiliseerida:

/* --- CSS (Füüsilised omadused) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

Standardses inglise keele LTR-kontekstis näeb see hea välja. Aga kui me paigutame selle konteinerisse atribuudiga dir="rtl" või writing-mode: vertical-rl, läheb küljendus katki. Dekoratiivne äär on valel poolel, avatar on valel poolel, veeris on vale ja ümarad nurgad on vales kohas.

"Uus" viis: vastupidav, loogiliste omadustega kaart

Nüüd refaktoorime sama komponendi, kasutades loogilisi omadusi. Kasutame omadusi nii 1. tasemelt kui ka uusi lisandusi 2. tasemelt.

/* --- CSS (Loogilised omadused) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` lühend on juba loogiline! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* 2. taseme vägi! */

  border-end-start-radius: 8px; /* 2. taseme vägi! */

}

.logical-card .avatar {

  float: inline-start; /* 2. taseme vägi! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testimine ja kontrollimine

Selle uue CSS-iga saate komponendi paigutada mis tahes konteinerisse ja see kohandub automaatselt.

• LTR-kontekstis: See näeb välja identne algse füüsilise versiooniga.
• RTL-kontekstis (dir="rtl"): Avatar ujub paremale, selle veeris on vasakul, dekoratiivne äär on paremal ja tekst on joondatud algusesse (paremale). Ümarad nurgad on korrektselt üleval paremal ja all paremal. See lihtsalt töötab.
• Vertikaalses kontekstis (writing-mode: vertical-rl): Kaardi "laius" (nüüd selle vertikaalne inline-size) on 300 pikslit. Avatar ujub "üles" (inline-start) koos veerisega selle "all" (inline-end). Dekoratiivne äär on paremal poolel (inline-start) ja ümarad nurgad on üleval paremal ja üleval vasakul. Komponent on end täielikult õigesti ümber orienteerinud ilma meediapäringute või ülekirjutamisteta.

Brauseritugi ja varulahendused

See kõik kõlab fantastiliselt, aga kuidas on brauseritoega? Hea uudis on see, et 1. taseme loogiliste omaduste tugi on suurepärane kõigis kaasaegsetes brauserites. Saate ja peaksite täna kasutama omadusi nagu margin-inline-start ja padding-block.

Uuemate 2. taseme funktsioonide tugi paraneb kiiresti, kuid ei ole veel universaalne. Loogilised väärtused float, clear ja resize on hästi toetatud. Loogilised border-radius omadused on kõige uuemad ja võivad veel olla funktsioonilipu taga või hiljutistes brauseriversioonides. Nagu alati, peaksite uusima ühilduvusinfo saamiseks konsulteerima ressurssidega nagu MDN Web Docs või CanIUse.com.

Progressiivse täiustamise strateegiad

Kuna CSS on loodud vastupidavaks, saame vanematele brauseritele kergesti pakkuda varulahendusi. Kaskaad tagab, et kui brauser ei mõista loogilist omadust, ignoreerib see seda lihtsalt ja kasutab selle ees määratletud füüsilist omadust.

Siin on, kuidas saate kirjutada varulahendustega CSS-i:

.card {

  /* Varulahendus vanematele brauseritele */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Kaasaegne loogiline omadus, mis kirjutab varulahenduse üle */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

See lähenemine tagab kindla baaskogemuse kõigile, pakkudes samal ajal täiustatud, kohanduvat küljendust kaasaegsete brauserite kasutajatele. Projektide puhul, mis ei pea toetama mitut kirjutusrežiimi, võib see olla liialdus. Aga iga globaalse rakenduse, disainisüsteemi või teema jaoks on see vastupidav ja tulevikukindel strateegia.

Tulevik on loogiline: kaugemale 2. tasemest

Üleminek füüsiliselt loogilisele mõtteviisile on üks olulisemaid muutusi kaasaegses CSS-is. See joondab meie stiliseerimiskeele mitmekesise, globaalse veebi tegelikkusega. See viib meid eemale habrastest, ekraanikesksetest häkkidest vastupidava, sisukeskse disaini suunas.

Kas on veel lünki? Mõned. Loogilisi väärtusi omadustele nagu background-position või gradientidele arutatakse veel. Kuid 2. taseme väljalaskmisega saab valdava enamuse igapäevastest küljendus- ja stiliseerimisülesannetest nüüd teostada puhtalt loogilise lähenemisviisiga.

Üleskutse arendajatele on selge: hakake vaikimisi kasutama loogilisi omadusi. Tehke inline-size oma eelistatud valikuks width asemel. Kasutage margin-inline vasaku ja parema veerise eraldi määramise asemel. See ei seisne ainult erinevate keelte toetamises; see seisneb parema, vastupidavama CSS-i kirjutamises. Loogiliste omadustega ehitatud komponent on olemuselt korduvkasutatavam ja kohandatavam, olgu see siis kasutusel LTR-, RTL- või vertikaalses küljenduses. See on lihtsalt parem inseneritöö.

Kokkuvõte: võtke voog omaks

CSS-i loogiliste omaduste 2. tase ei ole lihtsalt uute funktsioonide kogum; see on visiooni lõpuleviimine. See pakub viimaseid, olulisi osi, mida on vaja küljenduste ehitamiseks, mis austavad oma sisu loomulikku voogu, olenemata sellest, milline see voog on. Võttes omaks omadused nagu float: inline-start ja border-start-start-radius, tõstame oma meisterlikkust lihtsalt kastide positsioneerimiselt ekraanil tõeliselt globaalsete, kaasavate ja tulevikukindlate veebikogemuste kujundamiseni.

Järgmine kord, kui alustate uut projekti või ehitate uut komponenti, peatuge enne kui tipite margin-left. Küsige endalt: "Kas ma mõtlen vasakut või mõtlen ma algust?" Tehes selle väikese mõttemuutuse, aitate kaasa kohandatavama ja juurdepääsetavama veebi loomisele kõigi jaoks, kõikjal.